﻿@model IEnumerable<OPM.Models.CaseType>
@using OPM.Class;
@using System.Web.Mvc;
@using OPM.MultiResource

@{
    Layout = "~/Views/Shared/_LayoutPopup.cshtml";
}

<div class="service_search_header">
    <div class="service_search_title floatL">@Multi.Complaints</div>
    <div class="service_search_box floatL">
			<input id="service_search-input" type="search" value="" name="service_search-input">
			<div class="service_search_btn"></div>
    </div>
    <div class="clear"></div>
</div>
<div class="treetoggle_zone colorbox-middle" id="root1">
    @foreach (var md in Model)
        {
        <div class="treetoggle" data-ID="@md.val">
            <input type="checkbox" name="resultVal" value="@md.val" data-text="@md.text" />
              <a href="#" onclick="showTreeContent('@md.val'); return false;">@md.text</a>
        </div>
    }
    <input type="hidden" id="treevalue" value="" />
</div>
<div class="service_search_note2">
        <div class="BoxServiceActionPrev floatL" onclick="parent.$.fn.colorbox.close();">@Multi.Cancel</div>
		<div class="BoxServiceActionNext floatR" onclick="getallresult();">เพิ่ม</div>
		<div class="clear"></div>			
		
	</div>	
<script>
    $(document).ready(function () {
        var limit = 1;
        $('.treetoggle input[type=checkbox]').on('change', function (e) {
            if ($('input[type=checkbox]:checked').length > limit) {
                $(this).prop('checked', false);
            }
        });
    });
    function showTreeContent(id) {

        var that = $(".treetoggle[data-ID='" + id + "']");
        var countChild = that.children('.treetoggle').length;
        if (countChild == 0) {
            $.ajax({
                url: '@Url.Action("LovChannelIn")?ref_val=' + id + '&isJson=true',
                type: 'post',
                dataType: 'json',
                success: function (data) {
                    $.each(data, function (key, value) {
                        that.append('<div class="treetoggle" data-ID="' + value.val + '"><input type="checkbox" name="resultVal" value="' + value.val + '" data-text="' + value.text + '" /><a href="#"  onclick="showTreeContent(' + value.val + '); return false;">' + value.text + '</a></div>');

                    });
                    that.children('.treetoggle').toggle('blind');
                }
            });


            $('#treevalue').val(that.attr('data-ID'));
        } else {
            that.children('.treetoggle').toggle('blind');
        }

    }
    function getallresult() {
        var blockAction = 'case_type';
        var msg = '';
        $('.treetoggle input[type=checkbox]').each(function () {
            if ($(this).is(":checked")) {
                var returnvalue = $(this).val();
                var returntext = $(this).attr('data-text');

                msg += '<input type="hidden" name="' + blockAction + '[]" value="' + returnvalue + '" />';
                msg += '<div class="blockReAction" data-value="' + returnvalue + '">';
                msg += returntext;
                msg += '<span onclick="removebox(\'' + blockAction + '\',' + returnvalue + ');">';
                msg += '</span>';
                msg += '</div>';
            }
        });

        //parent.returntext = $(this).text();
        parent.returntext = msg;
        parent.$.colorbox.close();
    }
</script> 	


